<template>
<div class="version">
  <div style="height: 1.8rem;width: 8rem">
    <div class="content" v-show="Show">
      <p>当前版本:{{ options.version }}</p>
      <p>提测时间:{{ options.submitTime }}</p>
      <p style="color:FF0000">当前版本质量:{{ quality.qualitty.toFixed(4) }}</p>
<!--      <div v-for="(value, key) in showdata" :key="key" style="line-height:0.25rem;padding-left: 0.2rem">{{ key }}:{{ value }}</div>-->
      <p>Bug关闭率:{{ showdata.Bug修复率 }}</p>
      <p>项目重要风险:</p>
      <div v-for="item in risk" :key="item.riskContent">
        <p id="risk" style="color: #FFFFFF;padding-top:0.05rem;font-size: 0.22rem;line-height:0.3rem;font-weight: bolder;word-wrap: break-word;">{{ item.riskContent }}</p>
      </div>
      <div v-for="value in showContent" :key="value">
        <p id="show" style="color: #FFFFFF;padding-top:0.05rem;font-size: 0.22rem;line-height:0.3rem;font-weight: bolder;word-wrap: break-word;">{{ value }}</p>
      </div>

<!--      <p class="performance" style="padding-top:0.01rem">关键性能:</p>-->
<!--      <button class="performance" style="background:transparent;font-size:12pt;border-width:0px;color:#CCFFFF;" @click="click">{{config.data[0][0]}}</button>-->
    </div>
  </div>
  <div >
    <dv-scroll-board id="scroll" :config="config" v-show="isShow" style="height: 2.5rem;width: 10.6rem"/>
  </div>
</div>
</template>

<script>
// let versiondata = {"version": "20210406", "submitTime": "2021-04-06T01:16:19Z", "submitCount": 10, "confidence": 10, "modified": "1\u3001706687, 706655, 706491, 706466, 706462, 704051, 703837, 703491, 703372, 703060, 698089, 697453, 696723\r\n2\u3001\u4f18\u5316OTA\u5347\u7ea7\u7248\u672c\u5224\u65ad\u903b\u8f91\u3002\r\n3\u3001\u4f18\u5316\u767d\u677f\u5f00\u673a\u9996\u6b21\u542f\u52a8\u903b\u8f91\u3002\r\n4\u3001\u89e6\u63a7\u7248\u672c\uff1a\r\nHuaXinSE.ko:2021.04.02.M106323.RJ_XH8386_HuaXinSE.ATD.R48912.V0015\r\nTouchBox.bin:2021.03.22.M106438.DE86AC-SWA1.R48804.20P.W0.SLAVE.STM446.V4806.0xF29A", "basePass": 0, "basePassPre": 0, "bugCount": 228, "bugCBT": 135, "bugCBTPre": 135}
let performancedata = {"performance": [{"name": "\u4e66\u5199\u5ef6\u65f6", "attr1": "\u753b\u56fe", "attr2": "2k", "performance": "120ms", "version": "20210308", "competitor": "\u5e0c\u6c83", "commpetitorPerformance": "148ms", "competitor2": "\u9e3f\u5408", "commpetitorPerformance2": "152ms", "competitor3": null, "commpetitorPerformance3": null}, {"name": "\u4e66\u5199\u5ef6\u65f6", "attr1": "\u753b\u56fe", "attr2": "4k", "performance": "120ms", "version": "20210206", "competitor": "\u5e0c\u6c83", "commpetitorPerformance": "148ms", "competitor2": "\u9e3f\u5408", "commpetitorPerformance2": "152ms", "competitor3": null, "commpetitorPerformance3": null}, {"name": "\u4e66\u5199\u5ef6\u65f6", "attr1": "\u4e92\u52a8\u8bfe\u5802", "attr2": "4k", "performance": "120ms", "version": "20210203", "competitor": "\u5e0c\u6c83", "commpetitorPerformance": "148ms", "competitor2": "\u9e3f\u5408", "commpetitorPerformance2": "152ms", "competitor3": null, "commpetitorPerformance3": null}, {"name": "\u4e66\u5199\u5ef6\u65f6", "attr1": "\u4e92\u52a8\u8bfe\u5802", "attr2": "2k", "performance": "140ms", "version": "20210316", "competitor": "\u5e0c\u6c83", "commpetitorPerformance": "148ms", "competitor2": "\u9e3f\u5408", "commpetitorPerformance2": "152ms", "competitor3": null, "commpetitorPerformance3": null}]}
export default {
  data () {
    return {
      options:0,
      quality:{'qualitty':0},
      showdata:{'Bug修复率':0},
      risk:null,
      showContent:null,
      performance:performancedata,
      isShow: false,
      Show:false,
      // message: '书写延时',
      config:{
        header:['性能名称','参数1','参数2','性能数据','版本','竞品名称1','竞品数据1','竞品名称2','竞品数据2',],
        columnWidth: [90,90,90,90,90,90,90,90,90],
        align:['center'],
        // data:[
        //   ["\u4e66\u5199\u5ef6\u65f6",  "\u753b\u56fe", "2k",  "120ms", "20210308",  "\u5e0c\u6c83", "148ms",  "\u9e3f\u5408",  "152ms"],
        //   [ "\u4e66\u5199\u5ef6\u65f6","\u753b\u56fe","4k",  "120ms", "20210206", "\u5e0c\u6c83", "148ms", "\u9e3f\u5408", "152ms",],
        //   [ "\u4e66\u5199\u5ef6\u65f6", "\u4e92\u52a8\u8bfe\u5802", "4k","120ms","20210203", "\u5e0c\u6c83", "148ms", "\u9e3f\u5408", "152ms", ],
        //   [ "\u4e66\u5199\u5ef6\u65f6", "\u4e92\u52a8\u8bfe\u5802", "2k", "140ms", "20210316",  "\u5e0c\u6c83", "148ms", "\u9e3f\u5408",  "152ms"]
        //
        // ]
        data:[]
      }
    };
  },
  mounted() {
    this.getversion()
    // this.getperformance()
    this.getquality()
    this.getrisk()
    this.getshow()
  },
  methods:{
      getversion(){
        this.$http({ method: 'get',
                    url: 'show/version/?system='+this.$route.query.project,}).then(response => {
                    // console.log(response.data);
                    this.options = response.data
          // console.log(this.options.submitTime)
                    this.Show = true
                })
                },
    getquality(){
      this.$http({ method: 'get',
        url: 'show/quality/?system='+this.$route.query.project,}).then(response => {
        // console.log(response.data[Object.keys(response.data)[Object.keys(response.data).length -1]]);
        var details = response.data[Object.keys(response.data)[Object.keys(response.data).length -1]]
        this.quality = details
        var detail = {}
        for(var item in details) {
          if (!(item == 'submitTime' || item == 'qualitty' || item == '风险')) {
            detail[item] = details[item].toFixed(2)
          }
        }
        // console.log(detail)
        this.showdata = detail
        // this.Show = true
      })
    },
    getrisk(){
      this.$http({ method: 'get',
        url: 'show/risk/?system='+this.$route.query.project,}).then(response => {
        // console.log(response.data);
        var risk = []
        for(var key in response.data.detail){
          if(response.data.detail[key].riskStatus=="OPEN" && response.data.detail[key].affectLevel=="HIGH"){
            risk.push(response.data.detail[key])
          }
        }
        // console.log(risk)
        this.risk = risk
        // this.Show = true
      })
    },
    getshow(){
      this.$http({ method: 'get',
        url: 'show/getptmshow/?system='+this.$route.query.project,}).then(response => {
        // console.log(response.data);
        var show = []
        for(var key in response.data.show){
          show.push(response.data.show[key])
        }
        this.showContent = show
        // console.log(this.showContent)
      })
    },
    getperformance(){
      this.$http({ method: 'get',
        url: 'show/performance/?system='+this.$route.query.project,}).then(response => {
        for (var item in response.data["performance"]){
          var pdata = []
          for (var key in response.data["performance"][item]){
            pdata.push(response.data["performance"][item][key])
          }
          this.config.data.push(pdata)
        }
      })
    },
      click() {
					this.isShow = !this.isShow;
				},
  }

}
</script>

<style lang="scss" scoped>
.version{
  padding-left: 0.2rem;
  padding-top: 0.75rem;
  .content{
    padding-left: 0.25rem;
    //padding-top: 0.35rem;
    font-size: 0.2rem;
    p{ line-height:0.25rem}
    .quality{
      padding-left: 0.2rem
    }

    .performance{
      float: left;
    }
    #risk,#show{
      text-shadow: 0 0 3pt red,0 0 3pt red,0 0 3pt red,0 0 3pt red;
    }
  }
  #scroll{
    //float: left;
      // position: fixed;  // 浮动
      // z-index: 999999;
      // padding-top: 1rem;
    }
}

</style>